import React, { useRef ,useEffect, useState } from 'react'
import "../../assets/style/Expriment.scss"
import ring from "../../assets/img/expriment/ring.jpg"
import user from "../../assets/img/expriment/user.png"
import up from "../../assets/img/expriment/up.jpg"
import eye from "../../assets/img/expriment/eye.png"
import ward from "../../assets/img/expriment/ward.jpg"
import one from "../../assets/img/expriment/one.jpg"
import two from "../../assets/img/expriment/two.jpg"
import thr from "../../assets/img/expriment/thr.jpg"
import logo from "../../assets/img/expriment/logo.png"
import rang from "../../apis/modules/rang"
import { useNavigate } from 'react-router-dom'
export default function Experiment() {
  // let [goodsList,setGoodsList] = useState([])
  const userList = [1, 2, 3, 4, 5, 6, 7]
  const goodsList=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
  const userImg = useRef()
  const choose = useRef()
  const navigate = useNavigate();
  // const findRangAll=rang.findRangAll
  function quite() {
    let val = userImg.current.className
    const box = document.getElementsByClassName('quite')


    if (val.includes("hide")) {
      box[0].classList.remove('hide')
    } else {
      box[0].classList.add('hide')
    }
  }
  function active(num) {
    // console.log("hook",choose.current);
    // console.log(num);
    const li = document.getElementsByClassName('chooseLi')
    // console.log(li);
    for (let j = 0; j < li.length; j++) {

      li[j].classList.remove('active')
    }
    for (let i = 0; i < li.length; i++) {
      // console.log(li[i]);

      if (i == num) {
        li[i].classList.add('active')
        break;
      }
    }

  }
  function nav(num) {
    const li = document.getElementsByClassName('navLi')
    // console.log(li);
    for (let j = 0; j < li.length; j++) {

      li[j].classList.remove('m-active')
    }
    for (let i = 0; i < li.length; i++) {
      if (i == num) {
        li[i].classList.add('m-active')
        break;
      }
    }
  }
  function simple(num) {
    const li = document.getElementsByClassName('simple')
    console.log(li);
    for (let j = 0; j < li.length; j++) {
      li[j].classList.remove('m-active')
    }
    for (let i = 0; i < li.length; i++) {
      if (i == num) {
        li[i].classList.add('m-active')
        break;
      }
    }
  }
  useEffect(()=>{
    findRangAllApi()
  },[])
  async function findRangAllApi(){
    const res = await rang.findRangAll({pageIndex:1,pageSize:15})
    console.log("data",res.data.data.data);
    setGoodsList(res.data.data.data)
  }
  function changePage(tid,uid){
      // tid=JSON.stringify(tid)
      // uid=JSON.stringify(uid)
      // console.log(tid,uid);

      navigate(`/nav/detail?tid=${tid}&uid=${uid}`)
  }

  return (
    <div className='home'>
      
      <div className='main'>
        <div className='m-nav'>
            靶场演练 > 靶场实验
        </div>
        <div className='m-list'>
          <div className='m-list-1'>
            <span>分类:</span>
            <ul>
              <li className="m-active navLi" onClick={() => { nav(0) }}>全部</li>
              <li className='navLi' onClick={() => { nav(1) }}>扫描类</li>
              <li className='navLi' onClick={() => { nav(2) }}>文件类</li>
            </ul>
          </div>
          <div className='m-list-1'>
            <span>难度:</span>
            <ul>
              <li className="m-active simple" onClick={() => { simple(0) }}>全部</li>
              <li className='simple' onClick={() => { simple(1) }}>简单</li>
              <li className='simple' onClick={() => { simple(2) }}>中等</li>
              <li className='simple' onClick={() => { simple(3) }}>困难</li>
            </ul>
          </div>
        </div>
        <div className='m-btn'>
          <span className='m-b-active'>默认</span>
          <div>
            <span>最新 </span><img src={up} alt="" />
          </div>
          <div>
            <span>最热 </span><img src={up} alt="" />
          </div>
        </div>
        <div className='goods'>
          {goodsList.map((item, index) =>
            <div className='good' key={index} onClick={()=>{changePage(item.tid,item.uid)}}>
              <img src={item.image} alt="" />
              <div className='g-word'>
                <p>{item.tname}</p>
                <div className='g-bottom'>
                  <span>所属类型</span>
                  <div>
                    <img className='eye' src={eye} alt="" />
                    <span>访问人数</span>
                  </div>
                </div>
              </div>
            </div>
          )}
          <div className='m-right'>
            <div className='top'>
              <img className='ward' src={ward} alt="" />
              <div>得分总榜</div>
            </div>
            <div className='owner'>
              <div className='side'>
                <p>name</p>
                <div className='img'>
                  <img src={user} alt="" />
                  <img src={two} alt="" />
                </div>
                <p>100</p>

              </div>
              <div className='mid'>
                <p>name</p>
                <div className='img'>
                  <img src={user} alt="" />
                  <img src={one} alt="" />
                </div>
                <p>100</p>

              </div>
              <div className='side'>
                <p>name</p>
                <div className='img'>
                  <img src={user} alt="" />
                  <img src={thr} alt="" />
                </div>
                <p>100</p>
              </div>
            </div>
            <div className='line'></div>
            <table>
              <thead>
                <tr>
                  <td>排名</td>
                  <td>用户</td>
                  <td>得分</td>
                </tr>
              </thead>
              <tbody>
                {userList.map((item, index) =>
                  <tr key={index}>
                    <td>{index + 4}</td>
                    <td>
                      <img src={user} alt="" />
                      <span>name</span>
                    </td>
                    <td>100</td>
                  </tr>
                )
                }
              </tbody>
            </table>
          </div>
        </div>
        <div className='m-more'>
          <button className='more'>加载更多</button>
        </div>
      </div>

    </div>
  )
}
